﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML5 GetUserMedia Demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="css/weui.min.css" />
    <link rel="stylesheet" href="css/jquery-weui.css" />
    <link rel="stylesheet" href="css/example.css" />
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div class="container pr">
        <canvas id="canvas" style="position: absolute;width:375px;height: 100%;"></canvas>
        <img id="default_images" src="images/images/default.jpg" alt="" />
        <img id="mask" src="images/images/wk.png" style="display:none;position: absolute;top:0;left:0;z-index:9999;" alt="" />
        <video id="video" style="position: absolute;left: 0;top: 0;width:375px;height: 711px;" autoplay="autoplay"></video>

        <div id="button_photo1" class="button-photo1 pa weui-btn weui-btn_plain-default" style="bottom: 20px;left: 50%;z-index: 99997;" onclick="getFrontMedia();$(this).hide();$('#button_photo2').show();$('#mask').show();">立即体验</div>

        <div id="button_photo2" class="button-photo pa" style="display:none;bottom: 20px;left: 50%;z-index: 99998;" onclick="getPhoto();$('#video').hide();$('#button_upload').show();$('#mask').hide();"></div>

        <div id="button_upload" class="button-upload pa" style="display:none;bottom: 14px;left: 50%;z-index: 99999;" onclick="uploadPhoto();$('#button_photo2').hide();"></div>

    </div>

    <!--

        <hr />

        <input type="button" title="开启后置摄像头" value="开启后置摄像头" onclick="getBackMedia();" /><br />
        <video height="120px" autoplay="autoplay"></video><hr /> -->



    <script type="text/javascript">
        var video = document.querySelector('video');
        var audio, audioType;

        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');


        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

        var exArray = []; //存储设备源ID
        MediaStreamTrack.getSources(function (sourceInfos) {
            for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                //这里会遍历audio,video，所以要加以区分
                if (sourceInfo.kind === 'video') {
                    exArray.push(sourceInfo.id);
                }
            }
        });

        function getFrontMedia() {//前置摄像头
            if (navigator.getUserMedia) {
                navigator.getUserMedia({
                    'video': {
                        'optional': [{
                            'sourceId': exArray[0] //0为前置摄像头，1为后置
                        }]
                    },
                    'audio': true
                }, successFunc, errorFunc);    //success是获取成功的回调函数
            }
            else {
                alert('Native device media streaming (getUserMedia) not supported in this browser.');
            }
        }

        function getBackMedia() {//后置摄像头
            if (navigator.getUserMedia) {
                navigator.getUserMedia({
                    'video': {
                        'optional': [{
                            'sourceId': exArray[1] //0为前置摄像头，1为后置
                        }]
                    },
                    'audio': true
                }, successFunc, errorFunc);    //success是获取成功的回调函数
            }
            else {
                alert('Native device media streaming (getUserMedia) not supported in this browser.');
            }
        }

        function successFunc(stream) {
            //alert('Succeed to get media!');
            if (video.mozSrcObject !== undefined) {
                //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
                video.mozSrcObject = stream;
            }
            else {
                video.src = window.URL && window.URL.createObjectURL(stream) || stream;
            }

            // 音频
            audio = new Audio();
            audioType = getAudioType(audio);
            if (audioType) {
                audio.src = 'polaroid.' + audioType;
                audio.play();
            }
        }
        function errorFunc(e) {
            alert('Error！' + e);
        }


        //拍照
        function getPhoto() {
            context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
            //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。

        }

        function uploadPhoto() {
            var imgData = canvas.toDataURL();
            
            var base64Data = imgData.substr(22);

            $.ajax({
                url: "http://121.40.48.209:8290/api/v1/MyFaceHelp/",
                type: "post",
                cache: false,
                data: {
                    Filebase64: base64Data
                },
                async: false,
                dataType: 'json',
                success: function(res) {
                    //if (res.length > 0) {
                    window.location.href = "list.html";
                    
                    //}
                },
                error: function() {

                }
            });
            
            window.open('http://121.40.48.209:8290/Html/list.html', '', 'height=500,width=611,scrollbars=yes,status=yes');
        }


    </script>
    <script src="js/zepto.min.js"></script>
    <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>

</body>
</html>